<template>
  <el-drawer :title="title" :visible.sync="visible" direction="rtl" size="350px" @close="handleClose">
    <el-form ref="infomationForm" label-position="top" label-width="80px" :model="form" :rules="rules">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="已购买产品" prop="products">
            <el-input v-model="form.products" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="购买日期" prop="purchaseTime">
            <el-date-picker v-model="form.purchaseTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width:100%" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="系统版本" prop="edition">
            <el-input v-model="form.edition" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="预估费用（元）" prop="estimatedCost">
            <el-input-number v-model="form.estimatedCost" controls-position="right" :min="1" style="width:100%" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="供应商" prop="supplier">
            <el-input v-model="form.supplier" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="el-drawer__footer">
      <el-button @click="handleClose">关 闭</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'InfomationDrawer',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '',
      visible: this.show,
      loading: false,
      form: {},
      rules: {
        products: [
          { required: true, message: '已购买产品不能为空', trigger: 'blur' }
        ],
        purchaseTime: [
          { required: true, message: '购买日期不能为空', trigger: 'blur' }
        ],
        edition: [
          { required: true, message: '系统版本不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    show: {
      immediate: true,
      handler(val) {
        this.visible = this.show
      }
    }
  },
  methods: {
    add() {
      this.title = '新增'
    },
    edit(row) {
      this.title = '编辑'
      this.$nextTick(() => {
        this.form = Object.assign({}, row)
      })
    },
    submitForm() {
      this.$refs.infomationForm.validate((valid) => {
        if (valid) {
          this.handleClose()
        }
      })
    },
    reset() {
      this.form = {
        products: undefined,
        purchaseTime: undefined,
        edition: undefined,
        estimatedCost: 1,
        supplier: undefined
      }
      this.resetForm('infomationForm')
    },
    handleClose() {
      this.reset()
      this.$emit('update:show', false)
    }
  }
}
</script>
